<template>
    <div class="hello">
        el-input + el-button + el-popover + VEmojiPicker
        <el-form ref="form"  :model="form" label-width="120px">
            <el-form-item prop="emoji" label="emoji">
                <el-input v-model="form.emoji" placeholder="请输入" >
                    <template slot="append">
                        <el-popover
                            placement="bottom"
                            trigger="click" >
                            <el-button slot="reference" circle type="text" >😃</el-button>

                            <VEmojiPicker  @select="selectEmoji" append-to-body/>
                        </el-popover>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="group" label="分组">
                <el-input v-model="form.group" placeholder="请输入" />
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    data() {
        return {
            showEmoji:false,
            form:{
                emoji:'',
                group:'emoji选择框要关闭可以点击空白处'
            },
        }
    },
    methods:{
        selectEmoji(emoji) {
            // console.log(emoji)
            this.form.emoji=emoji.data
        }
    }
}
</script>
<style scoped>
</style>
